{% comment %}

Copyright 2008 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

{% endcomment %}
<html>
  <head>
    <title>ToDone</title>
    <script src="js/jquery-1.2.3.min.js"></script>
    <script src="js/todone.js"></script>
    <style>
      body {
        font-family: arial, sans-serif;
        padding: 0;
        margin: 0;
      }
      #left_side {
        float: left;
      }
      #logo {
        font-family: serif;
        font-size: 16pt;
        font-weight: bold;
        text-align: center;
      }
      #menu {
        border: 2px solid;
        width: 150px;
        position: relative;
        margin-top: 5px;
      }

      #menu .title {
        border-bottom: 2px solid;
        font-size: 20pt;
        font-weight: bold;
        text-align: center;
        padding-top: 2px;
      }

      #menu .item {
        border-bottom: 2px solid;
        padding-top: 2px;
        padding-left: 4px;
        font-size: 16pt;
        width: 146px;
        cursor: pointer;
      }

      #menu #newlist,
      #menu div#newlist:hover {
        cursor: auto;
        border-bottom: 0;
        background: #fff !important;
      }

      #new_list_form {
        text-align: right;
        padding: 5px;
        margin: 0;
      }
      
      #new_list_field {
        width: 70%;
        margin-bottom: 5px;
      }

      #menu .itemhidden {
        background: #fff !important;
      }

      .itemhidden .menuitemarrow {
        display: none;
      }

      .menuitemarrow {
        float: right;
        font-size: 12pt;
        margin-right: 3px;
      }

      #menu div.item:hover {
        background:#7ae3ff !important;
      }

      #tasklists {
        margin: 0;
        padding: 0;
        margin-left: 160px;
      }

      #tasklists li.tasklist {
        float: left;
        list-style: none;
        border: 0px solid;
      }


      div.tasklist {
        position: relative;
        margin: 10px;
        border: 2px solid #000;
        width: 200px;
      }

      div.tasklist .title {
        position: relative;
        border-bottom: 2px solid;
        font-size: 16pt;
        min-height: 24px;
        margin: 0;
        margin-right /**/: 0 !important;
        margin-right /**/: -2px;
        z-index: 5;
      }

      div.tasklist .title .name {
        width: 90%;
        text-align: center;
      }

      .listmenuarrow {
        position: absolute;
        top:3px;
        right:8px;
        vertical-align: bottom;
        cursor: pointer;
        z-index: 15;
        font-size: 12pt;
      }

      .task_menu {
        background: #fff;
        border: 1px solid black;
        border-bottom: 0;
        position: absolute;
        z-index: 10;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .task_menu li.menuitem {
        border-bottom: 1px solid black;
        width: 9em;
        cursor: pointer;
      }

      .menuitem .icon {
        float: left;
        width: 15px;
        height: 10px;
      }

      .task_menu li.hover {
        background: #7ae3ff;
      }

      .color_menu {
        background: #fff;
        border: 1px solid black;
        position: absolute;
        z-index: 20;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100px;
      }


      div.tasklist ul.tasks {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        /* Just set height here instead to make all lists the same size */
        height: auto !important;
        height: 300px;
        min-height: 300px;
        max-height: 600px;
      }

      .task {
        float: left;
        border: 0;
        border-bottom: 1px solid;
        padding: 2px;
        width: 198px;
      }

      input {
        border: 1px solid;
        padding: 2px;
      }

      div.tasklist .newtask {
        border-top: 1px solid;
        padding: 2px;
        width: 198px;
      }

      div.tasklist .newtaskinput {
        font-style: italic;
        color: #999;
        border-color: #000;
        width: 150px;
      }

      div.tasklist .newtaskinput_selected {
        font-style: normal;
        color: #000;
        border-color: #000;
        width: 150px;
      }

      .lcorner {
        width: 18px;
        height: 26px;
        position: absolute;
        left: -2px;
        top: -2px;
        z-index: 10;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
        src="images/corners.png", sizingMethod=crop)
      }

      .lcorner[class] {
        background: url(images/corners.png) no-repeat;
      }

      .rcorner {
        width: 36px;
        height: 26px;
        right: -2px;
        position: absolute;
        top: -2px;
        z-index: 10;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
        src="images/corners.png", sizingMethod=crop);
        clip:rect(0, 36px, 26px, 18px);
      }

      .rcorner[class] {
        background: url(images/corners.png) no-repeat;
      }

      .bar {
        margin: 0;
        margin-right: 10px;
        padding: 0;
        font-size: 82%;
      }

      .checked {
        background: url(images/check.png) no-repeat;
        width: 14px;
        height: 13px;
        float: left;
        margin: 0 3px;
      }

      .checkbox {
        background: -14px 0px url(images/check.png) no-repeat;
        width: 14px;
        height: 13px;
        float: left;
        margin: 0 3px;
      }

      .addbutton {
        padding:0px;
        border: 0;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="images/add.png", sizingMethod=crop);
        background: #fff;
        width: 37px;
        height: 16px;
      }

      .addbutton[class] {
        background: url(images/add.png) no-repeat;
      }

      input.addbutton:hover {
        background-color: #7a99ff;
      }

      .lists {
        margin-left: 150px;
        padding: 0;
        clear: right;
      }

      .swatch {
        float: left;
        border: 1px solid;
        width: 10px;
        height: 10px;
        margin: 2px;
        font-size: 1px;
        cursor: pointer;
      }

      .swatch_selected {
        border: 2px solid;
        width: 8px !important;
        width /**/:10px;
        height: 8px !important;
        height /**/:10px;
      }

      .new_task_form {
        margin: 0;
        padding: 0;
      }

      .name_input {
        margin: 1px 10px 1px 10px;
        width: 160px;
      }
    </style>
  </head>
  <body>
    <div class=bar align=right>
      <b>{{ user.email }}</b> |
      <a href="http://code.google.com/p/todone/">Soure code</a> |
      <a href={{logout_url}}>Sign out</a>
    </div>

    <div id=left_side>
      <div id=logo>ToDone</div>
      <div id=menu>
        <div class=title>Lists</div>

        {% for task_list in task_lists %}
          <div id=item{{task_list.key.id}}
               class="item{% if not task_list.is_shown %} itemhidden{% endif %}"
               style="background: {{ task_list.color }}">
            <span class=menuitemarrow>&#9658;</span>
            <span class=name>{{ task_list.name }}&nbsp;</span>
          </div>
        {% endfor %}

        <div class=item id=newlist>
          <a id=new_list_link href="" onclick="new_list_creator.activate(); return false">
            New List
          </a>
          <form id=new_list_form style="display:none"
            onsubmit="return new_list_creator.createList(this);"
            onreset="new_list_creator.reset(this);">
            <span style="float: left; font-size: 65%">
              Title:
            </span>
            <input id=new_list_field autocomplete=off>
            <span style="float: left; font-size: 65%">
              Color:
            </span>
            {% for color in colors %}
            <div class={% ifequal color default_color %}"swatch swatch_selected"
                       {% else %}swatch{% endifequal %} style="background: {{ color }}"
                 onclick="new_list_creator.selectColor(this, '{{ color }}');"></div>
            {% endfor %}
            <br style="clear: both">
            <input type=submit value=Create>
            <input type=reset value=Cancel>
          </form>
        </div>
      </div>
    </div>

    <ul id=tasklists>
      {% for task_list in task_lists %}
        <li class=tasklist id="tasklist{{ task_list.key.id }}"
          {% if not task_list.is_shown %}style="display: none"{% endif %}>
          <div class=tasklist>
            <div class=title style="background: {{ task_list.color }}">
              <div class=lcorner></div>
              <div class=rcorner></div>
              <div class=name>{{ task_list.name }}</div>
              <div class=listmenuarrow>&#9660;</div>
            </div>
            <ul class=tasks>
              {% for task in task_list.Tasks %}
                <li class=task id=task{{ task.key.id }}
                  {% if not task_list.is_completed_tasks_shown and task.done %}
                    style="display: none"
                  {% endif %}>
                  <div class={% if task.done %}checked
                             {% else %}checkbox{% endif %}></div>
                  {{ task.title }}
                </li>
              {% endfor %}
            </ul>
            <div class=newtask>
              <form class=new_task_form>
                <input name=newtaskinput class=newtaskinput
                       value="new task" autocomplete=off>
                <input class=addbutton type=submit value="">
              </form>
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>
    <script>
      var list_menu = new ListMenu();
      var new_list_creator = new NewListCreator(list_menu);
      {% for task_list in task_lists %}
        new TaskList({{ task_list.key.id }}, '{{ task_list.name }}',
                     '{{ task_list.color }}',
                     {% if task_list.is_completed_tasks_shown %}true
                     {% else %}false{% endif %});
      {% endfor %}
      var colors = ['{{ colors|join:"','" }}'];
    </script>
    {% if analytics_id %}
      <script type="text/javascript">
      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
      </script>
      <script type="text/javascript">
      var pageTracker = _gat._getTracker("{{analytics_id}}");
      pageTracker._initData();
      pageTracker._trackPageview("/lists");
      </script>
    {% endif %}
  </body>
</html>
